<!DOCTYPE html>
<html>
<head>
	<title>Image Slider</title>
	<style type="text/css">
		.slider-container {
			width: 600px;
			height: 400px;
			position: relative;
			margin: 0 auto;
			overflow: hidden;
		}
		
		.slider {
			width: 100%;
			height: 100%;
			display: flex;
			position: absolute;
			transition: transform 0.5s ease;
		}
		
		.slider img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.prev, .next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			padding: 10px;
			border: none;
			border-radius: 5px;
			background-color: #4CAF50;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		
		.prev:hover, .next:hover {
			background-color: #3e8e41;
		}
		
		.prev {
			left: 20px;
		}
		
		.next {
			right: 20px;
		}

	</style>
</head>
<body>
	<div class="slider-container">
		<div class="slider">
			<img src="image1.png">
			<img src="image2.png">
			<img src="image3.jpg">
		</div>
		<button class="prev">Prev</button>
		<button class="next">Next</button>
	</div>
	<script src="script.js"></script>
</body>
</html>
<script type="text/javascript">
	const slider = document.querySelector('.slider');
	const prevBtn = document.querySelector('.prev');
	const nextBtn = document.querySelector('.next');
	const images = document.querySelectorAll('.slider img');
	
	let counter = 1;
	const size = images[0].clientWidth;
	
	slider.style.transform = `translateX(${-size * counter}px)`;
	
	nextBtn.addEventListener('click', () => {
		if (counter >= images.length - 1) return;
		slider.style.transition = "transform 0.5s ease";
		counter++;
		slider.style.transform = `translateX(${-size * counter}px)`;
	});
	
	prevBtn.addEventListener('click', () => {
		if (counter <= 0) return;
		slider.style.transition = "transform 0.5s ease";
		counter--;
		slider.style.transform = `translateX(${-size * counter}px)`;
	});
	
	slider.addEventListener('transitionend', () => {
		if (images[counter].id === 'last-clone') {
			slider.style.transition = "none";
			counter = images.length - 2;
			slider.style.transform = `translateX(${-size * counter}px)`;
		}
		if (images[counter].id === 'first-clone') {
			slider.style.transition = "none";
			counter = images.length - counter;
			slider.style.transform = `translateX(${-size * counter}px)`;
		}
	});

</script>
